<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import useStore from '@/store';
import { useRouter } from 'vue-router';
import * as signalR from '@microsoft/signalr';

//如const props = defineProps({ name: { type:String, defaule:'' }})
const props = defineProps({});
//如const emit = defineEmits(['update', 'delete'])
const emit = defineEmits([]);

const router = useRouter();

let loginForm = reactive({
  userName: 'admin',
  password: 'xiaofeng',
  ValidateCode: '123',
});

const signIn = () => {
  window.$api.sign.signIn(loginForm).then(res => {
    useStore.setting.setToken(res.data.token);
    //let token = window.sessionStorage.setItem('token', res.Data.Token);
    router.push('/');
  });
};
</script>

<template>
  <div id="login">
    <div class="login-content">
      <div class="login-title">
        <span>Welcome</span>
        <span>Windows管理系统</span>
      </div>
      <div class="login-form">
        <el-form ref="form" :model="loginForm">
          <el-form-item>
            <el-input type="text" v-model="loginForm.userName" auto-complete="off" placeholder="账号">
              <template #prefix>
                <i-eva-person-fill />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码">
              <template #prefix>
                <i-eva-unlock-fill />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 150px" type="text" auto-complete="off" placeholder="验证码"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="width: 100%" type="primary" @click="signIn">登录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url(../../assets/bc.jpg);
  background-size: cover;
  .login-content {
    display: flex;
    width: 600px;
    height: 300px;
    border-radius: 5px;
    overflow: hidden;
    .login-title {
      background: rgba(50, 57, 81, 0.7);
      color: #fff;
      width: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .login-form {
      background: #fff;
      width: 300px;
      padding: 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .title {
    margin: 0 auto 30px auto;
    text-align: center;
    color: #707070;
    font-size: 18px;
  }
  .login-container {
    border-radius: 6px;
    background: #fff;
    button {
      width: 100%;
    }
    .input-icon {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }
  }
}
</style>
